<template>
  <div class="login-container" v-if="myinfo">
    <el-row :gutter="20">
      <el-col :span="5">
        <div class="baseinfo">
          <div class="infoblock">
            <h1>{{ myinfo.name }}</h1>
            <div>{{ myinfo.account }}</div>
            <div>{{ myinfo.classroom.place }}</div>
            <div>{{ myinfo.classroom.name }}</div>
          </div>
          <div class="teacherinfo">
            <div class="teacherinfoitem">
              <svg-icon class="left_icon" icon-class="user"></svg-icon>
             班主任：{{ myinfo.master.name }}
            </div>
            <div class="teacherinfoitem">
              <svg-icon class="left_icon" icon-class="group"></svg-icon>
              班级人数：{{ myinfo.classmate }} 人
            </div>
            <div class="teacherinfoitem">
              <svg-icon class="left_icon" icon-class="list"></svg-icon>
            注册时间：{{ myinfo.createtime.substring(O,10) }}
            </div>
          </div>
        </div>

      </el-col>
      <el-col :span="15">
        <div class="grid-content bg-purple">
          <el-card>
            <h2>课表信息:</h2>
            <el-table class="kebiaoblock" border :data="JSON.parse(myinfo.classroom.kebiao)">

              <el-table-column property="Monday" label="周一"></el-table-column>
              <el-table-column property="Tuesday" label="周二"></el-table-column>
              <el-table-column property="Wednesday" label="周三"></el-table-column>
              <el-table-column property="Thursday" label="周四"></el-table-column>
              <el-table-column property="Friday" label="周五"></el-table-column>
              <el-table-column property="Saturday" label="周六"></el-table-column>
              <el-table-column property="Sunday" label="周日"></el-table-column>
            </el-table>
          </el-card>
          <el-card>
            <h2>签到信息:</h2>
            <el-calendar  v-model="value">
              <template slot="dateCell" slot-scope="{ date ,data}">
                <div class="poR">
                  {{ data.day }}
                  <!-- 遮罩层 -->
                  <div v-for="(item, index) in qiandaolist" :key="index">
                    <span v-if="item.signdatetime == data.day"> '✔️' </span>
                  </div>
                </div>
              </template>
            </el-calendar>
          </el-card>

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getMyClassRoomInfo } from '@/api/student'
import { getToken, setToken, removeToken } from '@/utils/auth'

export default {
  name: 'login',
  data() {
    return {
      value: new Date(), // 当前月份
      qiandaolist: [],
      myinfo: undefined,
      loading: false
    }
  },
  created() {
    this.getbaseinfo()
  },
  watch: {
    value: function() {

    }
  },
  methods: {
    getbaseinfo() {
      getMyClassRoomInfo().then(res => {
        console.log(res)
        this.myinfo = res.info

        this.qiandaolist = res.info.qiandaos
        this.qiandaolist.forEach(item => {
          item = new Date(item.signdatetime)
        })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
$bg: #ffffff;
$dark_gray: #ffffff;
$light_gray: rgb(250, 250, 250);

.baseinfo {
  background-color: #d9d9d9;
  min-height: 500px;
}

.infoblock {
  height: 200px;
  background-color: #537ea9;
  color: white;
  text-align: center;
  padding-top: 1px;

  h5 h1 {
    padding: 0;
    margin-top: 0;
  }
}

.teacherinfo {
  text-align: left;

  padding: 10px;

  .left_icon {
    font-size: x-large;
    margin-right: 10px;
  }

  .teacherinfoitem {

    margin: 10px;
  }
}

.kebiaoblock {
  margin-bottom: 30px;

}
</style>
